<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2022-12-16 09:48:40
 * @LastEditors: Andy
 * @LastEditTime: 2023-03-21 15:49:31
-->
<template>
  <div class="tab-scond-content">
    <x-data style="padding: 0">
      <!--数据面板按钮插糟-->
      <template #tool>
        <el-row type="flex" class="tools" justify="space-between">
          <el-col :span="16">
            <el-button
              v-hasPermi="['upms:menu:add']"
              size="small"
              type="primary"
              @click="handleAddBtn()"
              :icon="buttonIcons('add')"
            >
              新增按钮
            </el-button>
            <!-- <el-button round size="small" @click="handleExport()">
                {{ $t('organization.post.export') }}
              </el-button> -->
          </el-col>
          <el-col :span="8" class="tools-config">
            <x-column-config :columns="btnColumns" @updateColumns="updateColumns" @on-refresh="loadData" />
          </el-col>
        </el-row>
      </template>
      <el-table
        ref="table"
        :show-header="true"
        row-key="id"
        height="100%"
        v-loading="loading"
        :data="tableData"
        :highlight-current-row="true"
        border
      >
        <el-table-column type="expand" :width="50">
          <template slot-scope="props">
            <el-descriptions
              :column="3"
              class="table-expand-contanier"
              v-for="(item, index) in props.row.apis"
              :key="index"
            >
              <el-descriptions-item :label="$t('auth.interface.apiName')">
                {{ item['apiName'] }}
              </el-descriptions-item>
              <el-descriptions-item :label="$t('auth.interface.state')">
                <!-- {{ selectDictLabel(dictOptions['system.state'], item['state'] + '') }} -->
                <x-state-cell
                  :stateClass="item['state'] || item['state'] === 0 ? 'success' : ''"
                  :text="selectDictLabel(dictOptions['system.state'], item['state'] + '')"
                />
              </el-descriptions-item>
              <el-descriptions-item :label="$t('auth.interface.perms')"> {{ item['perms'] }} </el-descriptions-item>
              <!-- <el-descriptions-item :label="$t('auth.interface.developer')" > {{ item['developer'] }} </el-descriptions-item> -->
            </el-descriptions>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(InterItem, InterIndex) in tableColumns"
          :key="InterIndex"
          :prop="InterItem.prop"
          :fixed="InterItem.fixed"
          :show-overflow-tooltip="true"
          :width="InterItem.width"
          :label="InterItem.label"
          :sortable="'custom'"
        >
        </el-table-column>
        <el-table-column fixed="right" :label="$t('common.opeartion')" :align="'center'" width="160">
          <template slot-scope="scope">
            <more-table-actions
              :action-list="btnActions"
              :permis-list="permissionsActions"
              :row="scope.row"
              @onActionClick="handleActions"
            />
          </template>
        </el-table-column>
      </el-table>
      <menu-btn-add
        ref="btnAddcomponents"
        :dict-options="dictOptions"
        :client-id="clientId"
        @handleSuccess="loadData"
      />
    </x-data>
  </div>
</template>
<script>
  import { selectDictLabel, buttonIcons } from '@package/utils'
  import { mapState } from 'pinia'
  import { pinias } from '@/common/pinia'
  import { apiGetMenuBtn, apiDeleteMenu } from '../api'
  import { EnumApiCode } from '../../../../../../globalEnum'
  import { btnColumns, btnActions, subTableColumns } from '../config/menuConfig'
  import MenuBtnAdd from './menuBtnAdd.vue'

  const { login } = pinias
  export default {
    components: { MenuBtnAdd },
    props: {
      dictOptions: {
        type: Object,
        default: () => ({})
      },
      clientId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        buttonIcons,
        btnColumns,
        subTableColumns,
        btnActions,
        tableData: [],
        tableColumns: [],
        loading: false,
        parentId: ''
      }
    },
    computed: {
      ...mapState(login, ['permissionsActions'])
    },
    methods: {
      selectDictLabel,
      loadData(infoId = null) {
        this.loading = true
        this.parentId = infoId || this.parentId
        this.tableColumns = this.btnColumns
        apiGetMenuBtn(this.parentId).then(({ code, data }) => {
          this.loading = false
          if (code === EnumApiCode.Success) {
            this.tableData = data
          }
        })
      },
      handleAddBtn() {
        this.$refs.btnAddcomponents.handleOpen({ parentId: this.parentId })
      },
      handleActions({ key, data }) {
        if (key === 'edit') {
          this.$refs.btnAddcomponents.handleOpen(data)
        } else if (key === 'delete') {
          this.$confirm('确认删除按钮吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.handleDeleteBtn(data.id)
          })
        }
      },
      handleDeleteBtn(infoId) {
        apiDeleteMenu(infoId).then(({ code, msg }) => {
          if (code === EnumApiCode.Success) {
            this.$message.success(this.$t('auth.role.successTips'))
            this.loadData()
          } else {
            this.$message.error(msg)
          }
        })
      },
      updateColumns(columns) {
        this.tableColumns = columns
      }
    }
  }
</script>
<style lang="scss" scoped>
  .tab-scond-content {
    display: flex;
    flex-direction: column;
    height: 100%;

    .x-data-view {
      margin: 0;
      padding: 0 20px 10px;
      border-width: 0;

      .tools {
        // line-height: 42px;
        // padding: 0 15px;
        // border-radius: 3px;

        // background-color: #eceff4;
      }
    }
  }

  ::v-deep.table-expand-contanier .el-descriptions--medium:not(.is-bordered) .el-descriptions-item__cell {
    // padding-bottom: 0;
  }
  ::v-deep.table-expand-contanier .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
    line-height: 42px;
    padding-left: 60px;
  }
  ::v-deep tr.el-descriptions-row {
    border-bottom: 1px solid #ebeef5;
  }
  .table-expand-contanier:last-child {
    ::v-deep tr.el-descriptions-row {
      border-bottom-width: 0;
    }
  }
  .color-delete {
    color: #f56c6c;
  }
</style>
